/**
 * Created by 1 on 2016/11/23.
 */
/**
 * Created by 1 on 2016/11/22.
 */
/**
 * Created by 1 on 2016/11/22.
 */
var i=0;
var $ = function (element) {
    return document.querySelector(element);
}
/**
 * 监听事件函数
 * @param ele
 * @param type
 * @param handler
 */
function eventHandler(ele,type,handler) {
    if (ele.addEventListener){
        ele.addEventListener(type,handler,false);
    }else if (ele.attachEvent){
        ele.attachEvent("on" + type,handler);
    }else {
        ele["on" + type] = handler;
    }
}
function dfHandler() {
    var root = $(".root");//获得根元素
    reset();
    dpOrder(root);
    changeColor();
}
function bfddleHandler() {
    var root = $(".root");//获得根元素
    reset();
    bfOrder(root);
    changeColor();
}

// function dfFoundHandler() {
//     dfHandler();
// }
// function bfFoundHandler() {
//     bfddleHandler();
// }
/**
 * 深度优先搜索
 */
function dpOrder(node) {
    if (!(node == null)) {
        numList.push(node);
        for (var i = 0;i < node.children.length;i++){//i=0时，循环完一个子节点中的所有的子节点，
            console.log(node.children[i]);
            dpOrder(node.children[i]);
        }
    }
}

/**
 * 广度优先搜索，先取第一个子元素，然后取子元素的所有同辈元素即可遍历完所有的子元素
 */
function bfOrder(node) {

    if(node != null){
        numList.push(node);
        if(node.className != 'root'){
            bfOrder(node.nextElementSibling);//先取出同辈节点,存入数组中
        }
        node = numList[i++];//在数组中取出同辈节点，
        bfOrder(node.firstElementChild);//再取出同辈节点的元素
        console.log(node);
    }
}
/**
 * 选中节点并显示
 */
function nodeHandler() {
    var selectNode = "";
    var allDiv = document.getElementsByTagName("div");
    for (var i = 0;i < allDiv.length;i++){
        allDiv[i].onclick = function (e) {
            reset();//每次点击都重置一次样式，清除上次的样式
            this.style.backgroundColor = '#3e3e3e';
            this.style.color = 'white';
            //必须要阻止事件冒泡，否则当前元素的父元素也会粗发事件
            e.stopPropagation();
            selectNode = this;
        };
    }

    //删除节点
    $("#removeNode").onclick = function (e) {
        if(selectNode == undefined){
            alert("请选择要删除的节点！");
        }else {
            var selectNodeParent = selectNode.parentNode;
            selectNodeParent.removeChild(selectNode);
        }
    };

    //添加节点
    $("#addNode").onclick = function (e) {
        var insertValue = $("#addInput").value;
        if (selectNode == undefined){
            alert("请选择要插入的节点")
        }else {
            if(insertValue == null){
                alert("请输入要插入的文本")
            }else {
                var insertDiv = document.createElement("div");
                insertDiv.innerHTML = insertValue;
                selectNode.appendChild(insertDiv);
            }


        }
    };

}

/**
 * 后序遍历，左右根
 */
function changeColor() {//先将其功能按顺序放入数组内，然后再使用延时函数显示数组即可，不需要变实现功能变现实
    var i = 0;
    var value = $("#foundInput").value.trim();//获得去掉字符串后的字符串
    numList[i].style.backgroundColor = 'blue';
    var timer = setInterval(function () {//函数每隔500秒被调用一次
        i++;
        if (i < numList.length){
            numList[i - 1].style.backgroundColor = '#fff';
            numList[i].style.backgroundColor = 'blue';
            if (numList[i].textContent == value){
                numList[i].style.backgroundColor = 'red';
                clearInterval(timer);//找到之后清除定时器，即停止了后面的操作
            }
        }else {
            clearInterval(timer);//清除定时器
            numList[numList.length - 1].style.backgroundColor = '#fff';//将最后一个的颜色变为白色
        }
    },500)
}
//重置样式
function reset() {
    numList = [];//重置数组中的数据
    var divs = document.getElementsByTagName("div");
    for (var i = 0;i < divs.length;i++){
        divs[i].style.backgroundColor = '#fff';
        divs[i].style.color = '#000';
    }
}
//初始化函数
function init() {
    eventHandler($("#dfSearch"),'click',dfHandler);
    eventHandler($("#bfSearch"),'click',bfddleHandler);
    eventHandler($("#dfFound"),'click',dfHandler);
    eventHandler($("#bfFound"),'click',bfddleHandler);
    nodeHandler();

}

init();